Использование графики в HTML-документах
Рисунки и анимация
могут сделать HTML-документ более привлекательным и интересным. Они не только
украшают страницу, но и помогают лучше передать содержание документа. Для
правильного использования графики в HTML-документе необходимо учитывать
следующие факторы: многие браузеры поддерживают только графические форматы GIF
и JPEG; файлы, содержащие графику, передаются медленно; некоторые пользователи
не имеют графических браузеров или намерено отключают загрузку изображений;
цветная графика, которая хорошо смотрится на вашем компьютере, может плохо
выглядеть на другом.
Тег <IMG> вставляет
изображение в документ, как если бы оно было просто одним большим символом.
Синтаксис тега:
<IMG
атрибут1=значение1 ... [атрибутN=значениеN]>
Атрибуты тега <IMG> и их значения
приведены в таблице 9.
Таблица 9 – Атрибуты
тега <IMG>
|
Атрибут |
Назначение |
|
SRC="файл" |
Задает URL-адрес изображения (можно указывать как абсолютный, так и относительный URL-адрес; если файл с изображением находится в той же директории, что и HTML-документ, то достаточно просто указать имя файла); этот атрибут является обязательным |
|
ALT="текст" |
Задает альтернативный текст для браузеров, не поддерживающих работу с изображениями |
|
ALIGN="тип" |
Задает расположение картинки
относительно текста, тип может принимать следующие значения: ТОР, MIDDLE,
BOTTON, LEFT, RIGHT |
|
BORDER=n |
Устанавливает толщину обрамления вокруг изображения в пикселах |
|
HEIGHT=n(%) |
Устанавливает высоту изображения в пикселах или в процентах от высоты окна браузера |
|
WIDTH=n(%) |
Устанавливает ширину изображения в пикселах или в процентах |
|
HSPACE=n |
Задает свободное пространство слева и справа от изображения (в пикселах) |
|
VSPACE=n |
Задается свободное пространство над и под изображением (в пикселах) |
Обратите внимание,
что ширина и высота изображения могут быть заданы не только в пикселах, но и в
процентах от размеров окна браузера. Многие компоненты, включаемые в состав
Web-страниц (изображения, таблицы, аплеты и т. д.), позволяют задавать
размер в относительных единицах (т. е. в процентах). Это позволяет
уменьшить зависимость внешнего вида документа от текущих установок конкретного
браузера и особенностей операционной системы. Рекомендуется задавать только
один из атрибутов пары "ширина-высота" изображения, иначе рисунок
может быть непропорционально деформирован и изменит свой вид.
Пример
Если размер
изображения, хранящегося в файле exm2.gif составляет 150 пикселов по ширине и
90 по высоте, то следующая команда приведет к включению в документ
деформированного изображения: <IMG SRC="exm2.gif" WIDTH=50
HEIGHT=200> .
Помните, что графика
передается по сети намного медленнее, чем текст, поэтому лучше включать в
документ картинки небольшого размера. Если вы задаете размер изображения
меньше, чем у исходного, то это приводит только к неоправданному увеличению
объема передачи информации по сети. Рациональнее предварительно уменьшить
размер изображения с помощью графического редактора.
Язык HTML позволяет
задать расположение изображения относительно окружающего его текста. Атрибут ALIGN может принимать
значения, указанные в таблице 10.
Таблица 10 –
Значения атрибута ALIGN
|
Значение |
Функция |
|
ТОР |
Выравнивает одну строку по верху изображения, остальные помещает после рисунка |
|
MIDDLE |
Выравнивает одну строку по середине изображения, остальные помещает после рисунка |
|
BOTTOM |
Выравнивает одну строку по низу изображения, остальные помещает после рисунка |
|
LEFT |
Прижимает обтекаемое текстом изображение к левой стороне окна браузера |
|
RIGHT |
Прижимает обтекаемое текстом изображение к правой стороне окна браузера |
Пример
Рассмотрим возможные
варианты выравнивания изображения относительно текста.
|
<img src=exm.gif align=top>
|
||||
|
<img src=exm.gif align=middle>
|
||||
|
<img src=exm.gif align=bottom>
|
||||
|
<img src=exm.gif align=left>
|
||||
<img src=exm.gif align=right> |
